<template>
    <div class="chapter-set">
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane
                :key="item.name"
                v-for="(item, index) in tabs"
                :label="item.title"
                :name="item.name"
            >
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>前置条件</span>
                        <el-button
                            style="float: right; padding: 3px 0"
                            type="text"
                            @click="uploadClick(1)"
                        >上传图片</el-button>
                    </div>
                    <div
                        contenteditable="true"
                        v-show="activeName==='cn'"
                        ref="contentBefore"
                        v-html="contentBefore"
                    ></div>
                    <div
                        contenteditable="true"
                        v-show="activeName==='en'"
                        ref="contentBeforeEn"
                        v-html="contentBeforeEn"
                    ></div>
                </el-card>
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>关联表格：</span>
                        <el-radio-group v-model="courseValue">
                            <el-radio-button label="courseType">课程类别</el-radio-button>
                            <el-radio-button label="courseSet">课程设置</el-radio-button>
                        </el-radio-group>
                    </div>

                    <div v-show="courseValue==='courseType'">
                        <edu-table
                            :pagination="false"
                            :data="courseTyleData"
                            border
                            :order="false"
                            :selection="false"
                            :row-style="rowStyle"
                            :header-cell-style="rowClass"
                            :span-method="objectSpanMethod"
                        >
                            <!-- <el-table-column label="课程类别">
                                <template slot-scope="scope">{{scope.row.courseTypeName}}</template>
                            </el-table-column>
                            <el-table-column label="课程学分要求">
                                <template slot-scope="scope">
                                    <el-input
                                        v-model="scope.row.credits"
                                        disabled="true"
                                        style="width:80px;"
                                    ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="百分比">
                                <template slot-scope="scope">{{scope.row.percent}}</template>
                            </el-table-column> -->
                             <el-table-column label="课程类别" align="center">
                                <template slot-scope="scope">{{scope.row.courseTypeName}}</template>
                            </el-table-column>
                            <el-table-column label="课程子类别" align="center" show-overflow-tooltip v-if="showCourseSubNature">
                                <template slot-scope="scope">{{scope.row.courseName}}</template>
                            </el-table-column>
                            <el-table-column :label="type == 1 && '课程学分要求' || '微专业课程学分要求'" align="center">
                                <template slot-scope="scope">
                                    <div>{{scope.row.credits}}</div>
                                </template>
                            </el-table-column>
                            <template v-if="type == 2">
                                <el-table-column label="辅修专业课程学分要求" align="center">
                                    <template slot-scope="scope">
                                        <div>{{scope.row.credits2}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="辅修学位课程学分要求" align="center">
                                    <template slot-scope="scope">
                                        <div>{{scope.row.credits3}}</div>
                                    </template>
                                </el-table-column>
                            </template>
                            <el-table-column label="百分比" align="center">
                                <template slot-scope="scope">{{scope.row.percent}}</template>
                            </el-table-column>
                        </edu-table>
                    </div>
                    <div v-show="courseValue==='courseSet'">
                        <minor-table :templateId="templateId" :operationFlag="false" :type="type"  :advancedType="advancedType" :schoolTerm="schoolTerm"></minor-table>
                    </div>
                </el-card>
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>后置条件</span>
                        <el-button
                            style="float: right; padding: 3px 0"
                            type="text"
                            @click="uploadClick(2)"
                        >上传图片</el-button>
                    </div>
                    <div
                        contenteditable="true"
                        v-show="activeName==='cn'"
                        ref="contentAfter"
                        v-html="contentAfter"
                    ></div>
                    <div
                        contenteditable="true"
                        v-show="activeName==='en'"
                        ref="contentAfterEn"
                        v-html="contentAfterEn"
                    ></div>
                </el-card>
            </el-tab-pane>
        </el-tabs>
        <upload-img :size="5" ref="editor" @successCBK="successCBK" :pictureTip="imgOption.pictureTip" :type="imgOption.type"/>
    </div>
</template>

<script>
import MinorTable from "./MinorTable";
import UploadImg from "common/src/components/common/UploadImg";
import { saveTableDetail } from "common/src/api/minor/minorCulturePlanManager";
export default {
    name: "RelationTable",
    components: { MinorTable, UploadImg },
    props: {
        templateId: {
            type: Number,
            default: 0
        },
        courseTyleData: {
            type: Array,
            default: []
        },
        data: {
            type: Object,
            default: {}
        },
        type: {
            type: Number,
            default: 1
        },
        showCourseSubNature: {
            type: Boolean,
            default: false
        },
        advancedType: {
            default: '',
            type: String
        },
        schoolTerm: {
            default: 6,
            type: Number
        }
    },
    data() {
        return {
            tabs: [
                {
                    title: "填写章节样例（中文）",
                    name: "cn"
                },
                {
                    title: "填写章节样例（英文）",
                    name: "en"
                }
            ],
            activeName: "cn",
            index: 1,
            courseValue: "courseType",
            params: {},
            contentAfter: this.data.minorDetailTable
                ? this.data.minorDetailTable.contentAfter
                : "",
            contentBefore: this.data.minorDetailTable
                ? this.data.minorDetailTable.contentBefore
                : "",
            contentBeforeEn: this.data.minorDetailTable
                ? this.data.minorDetailTable.contentBeforeEn
                : "",
            contentAfterEn: this.data.minorDetailTable
                ? this.data.minorDetailTable.contentAfterEn
                : "",
            imgOption:{
                pictureTip: '上传图片支持jpg、jpeg、png、bmp、gif格式，且单个不大于5M',
                type: ["image/jpg", "image/jpeg", "image/png", "image/bmp", "image/gif"]
            }
        };
    },
    methods: {
        uploadClick(index) {
            this.index = index;
            this.$refs.editor.dialogVisible = true;
        },
        successCBK(arr) {
            let vHtml = "";
            arr.forEach(el => {
                vHtml += `<img src="${el.url}" width = "${el.width}" height = "${
                    el.height
                }"/>`;
            });
            if (this.activeName === "cn") {
                if (this.index === 1) {
                    this.$refs.contentBefore[0].innerHTML += vHtml;
                } else {
                    this.$refs.contentAfter[0].innerHTML += vHtml;
                }
            } else {
                if (this.index === 1) {
                    this.$refs.contentBeforeEn[1].innerHTML += vHtml;
                } else {
                    this.$refs.contentAfterEn[1].innerHTML += vHtml;
                }
            }
            this.$refs.editor.dialogVisible = false;
            //this.saveTableDetail();
        },
        formatTags(str) {
            let reg = /(<(img|br)[^<>]*)(>)/g; 
            return (str || '').replace(reg, "$1/$3");
        },
        saveTableDetail() {
            let params = {
                templateId: this.templateId, //模板id
                chapterId: this.data.id, //章节id
                type: this.type, //方案或者模板的类型 1-模板 2-方案
                contentBefore: this.formatTags(this.$refs.contentBefore[0].innerHTML), //"前置内容中文",
                contentBeforeEn: this.formatTags(this.$refs.contentBeforeEn[1].innerHTML), //"前置内容英文",
                table: this.courseValue === "courseType" ? 1 : 2, //1课程类别2课程设置
                contentAfter: this.formatTags(this.$refs.contentAfter[0].innerHTML), // "后置内容中文",
                contentAfterEn: this.formatTags(this.$refs.contentAfterEn[1].innerHTML) //"后置内容英文"
            };
            saveTableDetail(params).then(({ code, data }) => {
                if (code == 200) {
                    this.$emit("relationTableSaved");
                }
            });
        },
        objectSpanMethod({ row, columnIndex }) {
            if (columnIndex === 0 && !row.isTotal) {
                if (row.isFirst) {
                    return {
                        rowspan: row.len,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        }
    }
};
</script>

<style scoped>
</style>
